<template>
	<div>
		<h1>我的购物车</h1>
		
		<el-checkbox-group v-model="cartIds" @change="cartsChange()">
			<el-table
		      :data="carts"
		      style="width: 100%">
			  
			  <el-table-column
			    label="全选"
			    width="180">
				<template slot-scope="scope">
					<el-checkbox :label="scope.row.id"></el-checkbox>
				</template>
			  </el-table-column>
		      <el-table-column
		        prop="id"
		        label="id"
		        width="180">
		      </el-table-column>
			  <el-table-column
			    label="商品封面"
			    width="250">
				 <template slot-scope="scope">
					<el-image style="width: 150px; height: 120px;" :src="scope.row.image"></el-image>
				 </template>
			  </el-table-column>
		      <el-table-column
		        prop="title"
		        label="商品标题"
		        width="180">
		      </el-table-column>
			  <el-table-column
			    prop="price"
			    label="单价"
			    width="180">
			  </el-table-column>
			  <el-table-column
			    prop="number"
			    label="数量"
			    width="180">
			  </el-table-column>
			  <el-table-column
			    prop="xiaoji"
			    label="价格小计"
			    width="180">
			  </el-table-column>
		    </el-table>
		</el-checkbox-group>
		
		<div style="margin: 20px;">
			<el-button type="primary" @click="openDialog()">选择优惠券</el-button>
		</div>
		
		
		<div style="width: 100%; height: 100px; display: flex; justify-content: flex-end; align-items: center;">
			<div v-if="youhuiprice == 0" style="font-size: 30px; color: red; margin-right: 20px;">
				总价: ￥{{allprice}}
			</div>
			
			<div v-else style="font-size: 30px; color: red; margin-right: 20px;">
				总价: <del>￥{{allprice}}</del>
				实际支付：￥{{shijiprice}} 
				优惠了：￥{{youhuiprice}}
			</div>
			
			<div>
				<el-button type="success">下单</el-button>
			</div>
		</div>
		
		
		<!-- 优惠券选择的弹窗 -->
		<el-dialog
		  title="选择优惠券"
		  :visible.sync="dialogVisible"
		  width="60%">
		  
		  <div>可用优惠券</div>
		  <hr>
		  
		  <div style="display: flex; flex-wrap: wrap;">
		  	<!-- 一张优惠券 -->
		  	<div v-for="couponGet in canUse" style="width: 300px; height: 200px; 
		  		display: flex; flex-direction: column;
		  		justify-content: space-evenly;
		  		padding: 0px 20px; box-sizing: border-box;
		  		border-radius: 10px;
		  		margin: 20px;
		  		background-color: beige;
		  		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
		  		
		  		<div style="font-size: 20px; font-weight: 900;">{{couponGet.coupon.couponTitle}}</div>
		  		<div style="font-size: 13px; color: dimgray;">{{couponGet.coupon.couponInfo}}</div>
		  		<div style="font-size: 13px; color: red; font-weight: 900;">
		  			有效时间：{{couponGet.beginTime}} - {{couponGet.endTime}}
		  		</div>
		  		<div style="align-self: flex-end;">
		  			<el-button size="mini" type="success" @click="useCoupon(couponGet.id)">使用该优惠券</el-button>
		  		</div>
		  	</div>
		  </div>
		  
		  <div style="margin-top: 20px;"></div>
		  <div>不可用优惠券</div>
		  <hr>
		  
		  <div style="display: flex; flex-wrap: wrap;">
		  	<!-- 一张优惠券 -->
		  	<div v-for="couponGet in noCanUse" style="width: 300px; height: 200px; 
		  		display: flex; flex-direction: column;
		  		justify-content: space-evenly;
		  		padding: 0px 20px; box-sizing: border-box;
		  		border-radius: 10px;
		  		margin: 20px;
		  		background-color: beige;
		  		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
		  		
		  		<div style="font-size: 20px; font-weight: 900;">{{couponGet.coupon.couponTitle}}</div>
		  		<div style="font-size: 13px; color: dimgray;">{{couponGet.coupon.couponInfo}}</div>
		  		<div style="font-size: 13px; color: red; font-weight: 900;">
		  			有效时间：{{couponGet.beginTime}} - {{couponGet.endTime}}
		  		</div>
		  		<div style="align-self: flex-end;">
		  			<el-button size="mini" type="danger" disabled>该优惠券不可用</el-button>
		  		</div>
		  	</div>
		  </div>
		  
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				//购物车数据列表
				carts: [],
				//表示被选中的购物车ID
				cartIds: [],
				//下单的总价
				allprice: 0.00,
				//实际支付的价格
				shijiprice: 0.00,
				//优惠了多少价格
				youhuiprice: 0.00,
				//弹窗的选择属性
				dialogVisible: false,
				//能使用的优惠券列表
				canUse: [],
				//不能使用的优惠券列表
				noCanUse: []
			}
		},
		methods: {
			//打开弹窗
			openDialog(){
				//查询优惠券列表
				this.queryMyCoupon();
				
				//打开弹窗
				this.dialogVisible = true;
			},
			//查询我的购物车
			queryMyCart(){
				this.$.ajax({
					url: "/cart/mylist",
					data: {
						uid: 1
					},
					success: (data) => {
						this.carts = data;
					}
				});
			},
			//购物车发生了变化
			cartsChange(){
				console.log("购物车勾选发生了变化：", this.cartIds);
				
				//计算总价
				this.cartsAllprice();
			},
			//计算购物车列表的总价
			cartsAllprice(couponGetId){
				this.$.ajax({
					type: "POST",
					url: "/cart/cartAllPrice",
					data: {
						cids: this.cartIds,
						//将优惠券领取ID带给后端
						couponGetId: couponGetId
					},
					success: (data) => {
						//显示总价
						this.allprice = data.allPrice;
						this.shijiprice = data.shijiPrice;
						this.youhuiprice = data.youhuiPrice;
					}
				});
			},
			//查询我的优惠券列表
			queryMyCoupon(){
				this.$.ajax({
					type: "POST",
					url: "/coupon/listMyCoupons",
					data: {
						uid: 1,
						cids: this.cartIds
					},
					success: (data) => {
						this.canUse = data.canUse;
						this.noCanUse = data.noCanUse;
					}
				});
			},
			//使用该优惠券
			useCoupon(couponGetId){
				//重新计算总价
				this.cartsAllprice(couponGetId);
				
				//关闭弹窗
				this.dialogVisible = false;
			}
		},
		mounted() {
			this.queryMyCart();
		}
	}
</script>

<style>
</style>